<template>
  <div>
    <!-- 1.0 头部区域 -->
    <div id="header" class="header">
      <div class="head-top">
        <div class="section">
          <div class="left-box">
            <span>黑马买买买购物商城</span>
            <a target="_blank" href="#"></a>
            <a target="_blank" href="#"></a>
          </div>
          <div id="menu" class="right-box">
            <router-link v-show="!isLogin" to="/site/login">登录</router-link>
            <a v-show="!isLogin" href="/register.html">注册</a>
            <strong>|</strong>
            <router-link v-show="isLogin" to="/site/vipCenter">会员中心</router-link>
            <a v-show="isLogin" href="javascript:void(0)" @click="logout">退出</a>
            <router-link to="/site/shopcart">
              <i id="shoppingCartCount" class="iconfont icon-cart"></i>购物车(
              <span>{{this.$store.getters.getBuyCount}}</span>)</router-link>
            <!--<a href="/content/contact.html"><i class="iconfont icon-phone"></i>联系我们</a>
                             <a href="/cart.html"><i class="iconfont icon-cart"></i>购物车(<span id="shoppingCartCount"><script type="text/javascript" src="/tools/submit_ajax.ashx?action=view_cart_count"></script></span>)</a>-->
          </div>
        </div>
      </div>
      <div class="head-nav">
        <div class="section">
          <!-- <div class="logo">
                             <a href="/index.html"><img width="230px" height="70px" src="/templates/main/images/logo.png" /></a>
                         </div>-->
          <div id="menu2" class="nav-box menuhd">
            <ul>
              <li class="index">
                <a href="#">
                  首页
                </a>
              </li>
              <li class="news">
                <a href="#">
                  每日精选
                </a>
              </li>
              <li class="photo">
                <a href="#">
                  秒杀专区
                </a>
              </li>
              <!--<li class="goods"><a href="">就业阶段</a></li>-->
              <li class="video">
                <a href="#">
                  黑马超市
                </a>
              </li>
              <li class="down">
                <a href="#">
                  会员权益
                </a>
              </li>
              <li>
                <router-link to="/site/goodslist">
                  购物商城
                </router-link>
              </li>
            </ul>
          </div>
          <div class="search-box">
            <div class="input-box">
              <input id="keywords" name="keywords" type="text" onkeydown="if(event.keyCode==13){SiteSearch('/search.html', '#keywords');return false};"
                placeholder="输入关健字" x-webkit-speech="">
            </div>
            <a href="javascript:;" onclick="SiteSearch('/search.html', '#keywords');">
              <i class="iconfont icon-search"></i>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 2.0 中间内容区域 -->
    <router-view/>

    <!-- 3.0 底部区域 -->
    <!--页面底部-->
    <div class="footer">
      <div class="section">
        <div class="foot-nav">
          <a href="">关于我们</a>
          <strong>|</strong>
          <a href="">联系我们</a>
          <strong>|</strong>
          <a href="">联系客服</a>
          <strong>|</strong>
          <a href="">合作招商</a>
          <strong>|</strong>
          <a href="">商家帮助</a>
          <strong>|</strong>
          <a href="">营销中心</a>
          <strong>|</strong>
          <a href="">隐私政策</a>
        </div>
        <div class="foot-box">
          <div class="copyright">
            <p>版权所有 黑马买买买 </p>
            <p>公司地址： 联系电话：</p>
            <p class="gray">Copyright © 2009-2018 itcast Corporation,All Rights Reserved.</p>
          </div>
          <div class="service">
            <p>周一至周日 9:00-24:00</p>
            <a href="#">
              <i class="iconfont icon-phone"></i>在线客服</a>
          </div>
        </div>
      </div>
    </div>
    <!--/页面底部-->

  </div>
</template>

<style>
  @import "../../static/site/js/jqplugins/hoverNav/css/style.css";
</style>

<script>
  //导入jquery
  import $ from 'jquery'

  import { bus, GOODSCOUNTCHANGE, LOGINSTATUSCHANGE, ISLOGIN } from '../common/commonvue'

  export default {
    data() {
      return {
        goodsCount: 0,
        isLogin: false
      }
    },
    created() {
      //监听事件
      /**
      bus.$on(GOODSCOUNTCHANGE,(count)=>{
        this.goodsCount+=count

        //保存在localStorage中
        localStorage.setItem("goodsCount",this.goodsCount)
      })
      **/
      this.isLogin = localStorage.getItem(ISLOGIN) === 'true'

      bus.$on(LOGINSTATUSCHANGE, () => {
        this.isLogin = localStorage.getItem(ISLOGIN)
      })
    },
    mounted() {
      this.initNavMenu()

      //从localStorage中读取上次保存的数量
      //this.goodsCount = parseInt(localStorage.getItem("goodsCount") || 0)
    },
    methods: {
      //初始化导航菜单
      initNavMenu() {
        $("#menu2 li a").wrapInner('<span class="out"></span>');
        $("#menu2 li a").each(function () {
          $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
        });

        $("#menu2 li a").hover(function () {
          $(".out", this).stop().animate({ 'top': '48px' }, 300); // move down - hide
          $(".over", this).stop().animate({ 'top': '0px' }, 300); // move down - show

        }, function () {
          $(".out", this).stop().animate({ 'top': '0px' }, 300); // move up - show
          $(".over", this).stop().animate({ 'top': '-48px' }, 300); // move up - hide
        });
      },
      //退出
      logout() {
        this.$confirm('确定退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const url = "site/account/logout"

          this.$axios.get(url).then(response => {
            if (response.data.status == 1) {
              this.$message.error(response.data.message)
            }

            localStorage.setItem(ISLOGIN, "false")

            this.isLogin = false

            this.$router.push({name:'goodslist'})
          })
        }).catch(() => {
          
        });
      }
    }
  }
</script>